<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ztree</title>
		<!--导入jquery的核心类库 -->
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<!--导入easyui的核心类库-->
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
		<!--国际化-->
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
		<!--主题样式-->
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<!--图标样式-->
		<link rel="stylesheet" href="../js/easyui/themes/icons/icon.css">
		<!--树形 -->
		<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js" ></script>
		<link rel="stylesheet" href="../js/ztree/zTreeStyle.css">
		<script type="text/javascript">
			//页面加载后执行
			$(function(){
				//1.进行ztree菜单设置
				var setting = {
					data: {
						simpleData: {
							enable: true //表示支持简单的json格式
						}
					}
				};
				
				//2.提供ztree树形菜单数据
				var zNodes =[
					{id:1,pId:0,name:"父节点一"},
					{id:2,pId:0,name:"父节点二"},
					{id:11,pId:1,name:"子节点一"},
					{id:12,pId:1,name:"子几点二"},
					{id:13,pId:2,name:"子节点三"},
					{id:14,pId:2,name:"子节点四"}
				];
				
				//3.生成菜单
				$.fn.zTree.init($("#baseMenu"),setting,zNodes);
				
			})
		</script>
	</head>
	
		<body class="easyui-layout" >
			<div data-options="region:'north',title:'传智播客管理系统'"style="height: 100px;">北部区域</div>
			
			<div data-options="region:'west',title:'菜单导航'" style="width: 180px;">
				<!--折叠面板-->
				<div class="easyui-accordion"   data-options="fit:true">
					<div data-options="title:'基础菜单'">
						<!--通过ztree 插件,制作树菜单-->
						<ul id="baseMenu" class="ztree"></ul>
					</div>
					<div data-options="title:'系统菜单'">面板二</div>
				</div>
			</div>
			
			<div data-options="region:'center'">
				<!--选项卡-->
				<div  id="mytabs"  class="easyui-tabs" data-options="fit:true">
					<div data-options="title:'选项卡面板一',closable:true">选项卡面板一</div>
					<div data-options="title:'选项卡面板二',closable:true">选项卡面板二</div>
				</div>
			</div>
			<div data-options="region:'east'" style="width: 80px;">东部区域</div>
			<div data-options="region:'south'" style="height: 80px;"> 南部区域</div>			
	</body>
</html>
